Getting Started with React Development with the React Suite Library — Steps Display

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Steps Display

We can steps display with the Steps component.

For instance, we can write:

import React from "react";
import { Steps } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Steps current={1}>
        <Steps.Item />
        <Steps.Item />
        <Steps.Item />
        <Steps.Item />
      </Steps>
    </div>
  );
}

We add the Steps component with the current prop to set the index of the current item.

And we can add title and description with the title and description props:

import React from "react";
import { Steps } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Steps current={1}>
        <Steps.Item title="Finished" description="This is a description." />
        <Steps.Item title="In Progress" description="This is a description." />
        <Steps.Item title="Waiting" description="This is a description." />
      </Steps>
    </div>
  );
}

We can add the vertical prop to make it vertical:

import React from "react";
import { Steps } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Steps current={1} vertical>
        <Steps.Item title="Finished" description="This is a description." />
        <Steps.Item title="In Progress" description="This is a description." />
        <Steps.Item title="Waiting" description="This is a description." />
      </Steps>
    </div>
  );
}

We can change the status color of the current step with the currentStatus prop:

import React from "react";
import { Steps } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Steps current={1} currentStatus="error">
        <Steps.Item title="Finished" description="This is a description." />
        <Steps.Item title="In Progress" description="This is a description." />
        <Steps.Item title="Waiting" description="This is a description." />
      </Steps>
    </div>
  );
}

The small prop makes the step display smaller:

import React from "react";
import { Steps } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Steps current={1} small>
        <Steps.Item title="Finished" />
        <Steps.Item title="In Progress" />
        <Steps.Item title="Waiting" />
      </Steps>
    </div>
  );
}

We can add icons with the icon prop:

import React from "react";
import { Steps, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Steps current={1}>
        <Steps.Item
          title="Finished"
          icon={<Icon icon="pencil-square" size="lg" />}
        />
        <Steps.Item title="In Progress" icon={<Icon icon="book" size="lg" />} />
        <Steps.Item title="Waiting" icon={<Icon icon="wechat" size="lg" />} />
      </Steps>
    </div>
  );
}

Conclusion

We can add steps display into our React app with React Suite.